vuex实现购物车逻辑

前言

在小型项目中，组件与组件之间通信比较简单。父组件可以使用pros向子组件传递数据，子组件可以通过$emit向父组件传递事件和数据，一旦状态管理多了，代码就会变得十分混乱。由于状态零散的分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。vuex状态管理库可以很方便的统一管理项目的状态，无论是对现在的开发人员还是将来新接手的开发人员都容易管理和维护。并且，一些逻辑代码也可以抽离出来，具体哪里需要用到只需要分发一下事件，简单方便。

Vuex组成

Vuex由以下部分组成：

• state 存放项目中各种多组件共享的状态
• mutations 存放更改state里状态的方法
• getters 从state里派生出来的状态，，比如将state中的某种状态进行过滤然后获取到的新的状态
• actions 通过commit mutations中的方法来改变状态，可以进行异步操作
• modules将状态按模块划分，将Store对象分割成多个子模块，使代码结构更加清晰

通用配置

import * as types from '../types.js'
const state = {}
const actions = {}
const mutations = {}
const getters = {}
export default {
    state,
    actions,
    mutations,
    getters
}

若是有多个模块：

|__store
    |__moduleName1
    |__moduleName2
        |__state.js
        |__types.js
        |__actions.js
        |__mutations.js
        |__index.js
        |__getters.js
    |__index.js

在index.js文件中导出模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import moduleName1 from './moduleName1'
import moduleName2 from './moduleName2'


export detault new Vuex.Store({
    modules: {
        moduleName1,
        moduleName2,
    }
})

注意点：
所有子模块的getters对象里的方法会被合并到$store里，如果不同的子模块有重名的方法，就会报错，只要在index.js文件上导出模块的地方加上namespace:true就可以了。

mapGetters,mapActions,mapState

当需要引入多个状态和事件时不需要一个一个的引入，集体引入很方便
使用的时候要先引入这些变量

import {mapGetters, mapActions, mapState} from 'vuex'

mapGetters,mapState值都属于计算属性，在文件中写在computed里面

computed: {
    ...mapGetters({
        ......
    }),
    ...mapState({
        ......
    }),
    otherCompuedValue() {......}
}

mapActions属于事件

methods: {
    ...mapActions({
        ......
    })
}

使用注意

Mutation 需遵守 Vue 的响应规则

Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

1. 最好提前在你的 store 中初始化好所有所需属性
2. 当需要在对象上添加新属性时，你应该
   使用Vue.set(obj, ‘newProp’, 123)
   或者用对象展开符，用新对象替换老对象obj = {...obj, {newProp: 123}}

QA

Mutations为什么必须是同步函数

mutations的作用是同步的改变store里面的状态的值，是使值从一个状态变到另一个状态，如果是异步操作，那个这个改变的过程将变得不可追踪，因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的

所以，就可以解释下面两个问题

• actions为什么不能直接操作store
• 可不可以在actions里修改了store的值，如果在actions里修改，可能会存在什么问题？

actions中的方法也可以改变store的状态，但是从不建议这样做，因为状态的改变将变得不可追踪（有异步回调函数），团队开发时会变得混乱，mutation同步改变状态时会有mutation记录，对应每个状态被改变的时间，开发追踪变得清晰。

实战

实战是最重要的，容易发现问题，可以进步飞快~
用vuex完成的有关购物车部分的小项目：https://github.com/Gcalolin/v...

欢迎star~